<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Selectors API</title>
</head>
<body>
</body>
<script>
/* 1. DOM 拓展：描述 DOM 扩展的两个标准：Selectors API 与 HTML5。这两个标准体现了社区需求和标准化某些手段及 
      API 的愿景。另外还有较小的 Element Traversal 规范，增加了一些 DOM 属性。
   2. Selectors API（参见 W3C 网站上的 Selectors API Level 1）是 W3C 推荐标准，规定了浏览器原生支持的 CSS
      查询 API。支持这一特性的所有 JavaScript 库都会实现一个基本的 CSS 解析器，然后使用已有的 DOM 方法搜索文档并
      匹配目标节点。虽然库开发者在不断改进其性能，但 JavaScript 代码能做到的毕竟有限。通过浏览器原生支持这个 API，
      解析和遍历 DOM 树可以通过底层编译语言实现，性能也有了数量级的提升。
   3. Selectors API Level 1 的核心是两个方法：querySelector()和 querySelectorAll()。在兼容浏览器中，Document 
      类型和 Element 类型的实例上都会暴露这两个方法。
   4. Selectors API Level 2 规范在 Element 类型上新增了更多方法，比如 matches()、find()和findAll()。不过，目前
      还没有浏览器实现或宣称实现 find()和 findAll()。
 */

 /*
   5. querySelector():方法接收 CSS 选择符参数，返回匹配该模式的第一个后代元素，如果没有匹配项则返回 null。
   6. Document 上使用 querySelector()方法时，会从文档元素开始搜索；在 Element 上使用 querySelector()方法时，则只会从当前元素的后代中查询。
   7. 用于查询模式的 CSS 选择符可繁可简，依需求而定。如果选择符有语法错误或碰到不支持的选择符，
      则 querySelector()方法会抛出错误。
  */
  // 取得 ID 为"myDiv"的元素
  let myDiv = document.querySelector("#myDiv");
  // 取得类名为"selected"的第一个元素
  let selected = document.querySelector(".selected");
  // 取得类名为"button"的图片
  let img = document.body.querySelector("img.button");
</script>
</html>
